let box = document.querySelector(".box"),
  titlebox = document.querySelector(".tit-box"),
  fls = document.querySelectorAll(".fl"),
  radio = document.querySelectorAll(".radio");
// 点击的成语
let arr = [
  "一帆风顺",
  "三心二意",
  "八面玲珑",
  "九牛一毛",
  "三羊开泰",
  "如坐针毡",
];
// 混淆字
let dic =
  "一乙九了七八厂儿二几力人入十又乃丁卜刀么万三上下与习也之义于个千及大飞干工广己已口马门山子久丸丈乞乡勺刃亏凡卫亿亡叉川寸弓巾女尸士夕";
function clear() {
  fls.forEach((fl) => {
    fl.style.dispaly = "none";
  });
  radio.forEach((radio) => {
    radio.style.opacity = 0;
  });
}
function start() {
  // 初始化box
  box.innerHTML = '<div class="bg-blur"></div>';

  titlebox.innerHTML = "";
  titlebox.style.color = "#333";
  let math = arr[Math.floor(Math.random() * arr.length)];
  titlebox.innerHTML = `请依次点击：<span>${math}</span>`;
  let timer;
  let place = [
    { left: "20px", top: "0px" },
    { left: "160px", top: "20px" },
    { left: "80px", top: "200px" },
    { left: "170px", top: "260px" },
    { left: "20px", top: "140px" },
    { left: "110px", top: "260px" },
    { left: "230px", top: "150px" },
    { left: '160px', top: '120px' },
    { left: "220px", top: "260px" },
  ];
  // 随机打乱顺序
  place.sort(() => {
    return Math.random()-0.5
  })

  // 保存总的字符串
  let extra_str = ''
  // 总字符下标
  let verify = []
  // 随机获取混淆字
  for (let i = 0; i < 5; i++){
    extra_str += dic[Math.floor(Math.random() * dic.length)]
  }
  extra_str = math + extra_str
  
  // 设置每个字的位置和属性
  for (i in extra_str) {
    verify.push(i)
    // 随机设置文字的位置
    let left = Math.floor(Math.random() * i)
    let top = Math.floor(Math.random() * (i * 10))
    // 外层包裹的div
    let divs=document.createElement('div')
    divs.classList.add('fl')
    divs.style.left=place[i].left
    divs.style.top = place[i].top
    console.log(place[i].left);
    // 内层的文字
    let span=document.createElement('span')
    span.innerHTML = extra_str[i]
    // 随机打乱文字的位置
    span.style.left=left+'px'
    span.style.top = top + 'px'
    // 设置相应的属性，方便后面选择做判断
    span.setAttribute('data-index',i)
    span.setAttribute('data-judge', true)
    
    divs.appendChild(span)
    box.appendChild(divs)
  }
  // 已经点击的下标
  let cspan=[]
  let fspans = box.querySelectorAll('.fl span')
  let a=0

  fspans.forEach((fspan) => {
    // 为每个字添加点击事件
    fspan.addEventListener('click', function (event) {

      // 判断是否添加过
      let isAdd=JSON.parse(fspan.getAttribute('data-judge'))
      if (!isAdd) return console.log('重复点击');

      cspan.push(fspan.getAttribute('data-index'))
      fspan.setAttribute('data-judge', false)
      // 添加绿点
      a++
      let rad=document.createElement('div')
      rad.classList.add('radio')
      rad.innerText=a
      rad.style.left=event.pageX-box.offsetLeft-20+'px'
      rad.style.top=event.pageY-box.offsetTop-20+'px'
      box.appendChild(rad)
      if (a == 4) {
        if (cspan.join() == verify.slice(0, 4).join()) {
          titlebox.innerHTML='验证成功'
          titlebox.style.color='green'
          clear()
        } else {
          titlebox.innerHTML='验证失败'
          titlebox.style.color='red'
          clear()
        }
        clearTimeout(timer)
        timer = setTimeout(() => {
          console.log('1111');
          start()
        }, 1000);
        a = 0
      }

    })
  })
  // 不能再为主页面添加点击事件、不然会冒泡父点击事件就会不断执行
  // box.addEventListener('click', function (event) {
  //   console.log('box');
    
  //   /* 最近在做特效的过程中遇到了获取目标事件源的情况，一般情况下我们获取目标事件源都是谁是调用者谁就是事件源，但是当有批量的DOM需要操作的时候，要判断哪一个dom是事件源就不是很明确了，使用e.target可以准确地获取事件源，并且在使用的过程中可以比较判断，从而实现我们的代码。
  //   举个例子：当做一个拖拽的案例的时候，有多个事件源，但是想要知道鼠标点击的是不是我们想要的事件源的时候（例如：其他区域和事件源进行判断），我们就可以使用e.target，比较获取的事件源的Id,classname，nodename...
  //   event.target经常使用的属性有以下几个：

  //       event.target.nodeName  　　 //获取事件触发元素标签name

  //       event.target.id　　　　　　　//获取事件触发元素id

  //       event.target.className　　  //获取事件触发元素classname

  //       event.target.innerHTML　　  //获取事件触发元素的内容

  //       在了解e.target的同时，还有一个e.currentTarget,这两个属性让人傻傻的认不清楚，我按照我的理解记录一下：
  //       一般情况下：
  //       e.currentTarget : 指的是绑定了事件监听的元素（可以理解为触发事件元素的父级元素）
  //       e.target： 指的是真正触发事件的那个元素
  //       事件冒泡是：如果绑定的事件对象子对象（比如点击页面上的button）时，e.currentTarget == e.target： 指的是真正触发事件的那个元素
  //       如果绑定的事件对象是document时，e.currentTarget是document,而e.target 是btn
  //   */
    
  //   if(event.target.className=='radio') return console.log('重复点击');
  //   a++
  //   let rad=document.createElement('div')
  //   rad.classList.add('radio')
  //   rad.innerText=a
  //   rad.style.left=event.pageX-box.offsetLeft-20+'px'
  //   rad.style.top=event.pageY-box.offsetTop-20+'px'
  //   box.appendChild(rad)
    
  //   if (a == 4) {
  //     if (cspan.join() == verify.slice(0, 4).join()) {
  //       titlebox.innerHTML='验证成功'
  //       titlebox.style.color='green'
  //       clear()
  //     } else {
  //       titlebox.innerHTML='验证失败'
  //       titlebox.style.color='red'
  //       clear()
  //     }
  //     clearTimeout(timer)
  //     timer = setTimeout(() => {
  //       console.log('1111');
  //       start()
  //     }, 1000);
  //     a = 0
  //   }
  // })
}
start();
